@extends('layouts.app')

@section('htmlheader_title')
    基础设置
@endsection

@section('contentheader_title')
    基础设置
@endsection

@section('contentheader_description')
    关键词管理
@endsection

@section('main-content')
    <div class="page-content">
        <!-- /.ace-settings-container -->
        <!-- /section:settings.box -->
        <div class="page-content-area">
            <!-- /.page-header -->
            <div class="row">
                <div class="col-xs-12">

                    <div class="page-header">
                        <h1>
                            关键词设置
                            <button type="button" class="btn btn-white btn-default" style="float:right;" onclick="window.location.href='/basic/function/keywordmanager';">返回</button>
                        </h1>
                    </div>

                    <form class="form-horizontal" role="form" action="{{url('BaseSet/add')}}" method="post" id="form1" enctype="multipart/form-data">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right">关键词：</label>
                            <div class="col-sm-9">
                                <input type="text" name="keyword" id="txtkey" placeholder="请输入关键词" class="form-control" style="width: 510px;">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right">排序：</label>
                            <div class="col-sm-9">
                                <input type="text" name="sort" id="txtorder" placeholder="请输入数字" class="form-control" style="width: 510px;" value="0">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right">关键词类型：</label>
                            <div class="col-sm-9">
                                <label style="padding-top:4px;">
                                    <input name="type" type="radio" class="ace" value="0" checked="checked" onclick="changeType(0)">
                                    <span class="lbl">文本回复</span>
                                </label>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <label style="padding-top:4px;">
                                    <input name="ktype" type="radio" class="ace" value="2" onclick="changeType(2)">
                                    <span class="lbl">图片回复</span>
                                </label>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <label style="padding-top:4px;">
                                    <input name="ktype" type="radio" class="ace" value="1" onclick="changeType(1)">
                                    <span class="lbl">图文回复</span>
                                </label>
                            </div>
                        </div>

                        <div class="form-group" id="divText" style="display: block;">
                            <label class="col-sm-3 control-label no-padding-right">回复文本：</label>
                            <div class="col-sm-9">
                                <textarea class="form-control" name="content" id="txtcontent" placeholder="请输入文本回复内容" style="width:60%;height:200px;"></textarea>
                            </div>
                        </div>
                        <div class="form-group" id="divImgText" style="display: none;">
                            <label class="col-sm-3 control-label no-padding-right">回复图文：</label>
                            <div class="col-sm-9">
                                <button class="btn btn-primary" type="button" onclick="showArticlesDialog()"><i class="ace-icon fa fa-pencil align-top bigger-125"></i>添加图文消息</button>
                                &nbsp;&nbsp;<a href="javascript:void(0)" onclick="clearArticle()">清空重选</a>
                            </div>
                        </div>
                        <div class="form-group" id="divImgTextArticle" style="display: none;">
                            <label class="col-sm-3 control-label no-padding-right">&nbsp;</label>
                            <div class="col-sm-9">
                                <!--选中的文章列表-->
                                <ul id="ulArticleList">

                                </ul>
                            </div>
                        </div>

                       <!-- <div class="form-group" id="divImage" style="display: none;">
                            <label class="col-sm-3 control-label no-padding-right">上传图片：</label>
                            <div class="col-sm-9" id="divInputFile">
                                <div class="col-sm-5" style="padding:0;">
                                    <label class="ace-file-input">
                                        <input type="file" id="fileImage" name="fileImage">
                                        <span class="ace-file-container" data-title="选择图片">
                                            <span class="ace-file-name" data-title="暂无图片 ...">
                                                <i class=" ace-icon fa fa-upload"></i>
                                            </span>
                                        </span>
                                        <a class="remove" href="javascript:void(0)">
                                            <i class=" ace-icon fa fa-times">
                                            </i>
                                        </a>
                                    </label>
                                </div>
                                <label style="padding-top:4px;color:Red;">&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;仅能上传.jpg|.jpeg|.png格式图片</label>
                            </div>
                        </div>
-->
                        <!--验证消息提示-->
                        <div class="form-group" id="divErrorMsg" style="display:none;">
                            <label class="col-sm-3 control-label no-padding-right"></label>
                            <div class="col-sm-9">
                                <div class="alert alert-danger" style="width:60%;">
                                    <strong id="errorMsg">


                                    </strong>
                                </div>
                            </div>
                        </div>



                        <div class="clearfix form-actions">
                            <div class="col-md-offset-3 col-md-9">
                                <button class="btn btn-lg btn-success" type="submit" >
                                    <i class="ace-icon fa fa-check"></i>
                                    保存
                                </button>
                            </div>
                        </div>


                    </form>



                    <!--上传图片-->
                    <script type="text/javascript">
                        $(function () {
                            var file_input = $('#fileImage');
                            file_input.ace_file_input({
                                no_file: '暂无图片 ...',
                                btn_choose: '选择图片',
                                btn_change: '更改图片',
                                droppable: false,
                                //icon_remove: null,
                                allowExt: ["jpeg", "jpg", "png"],
                                allowMime: ["image/jpg", "image/jpeg", "image/png"]
                                //whitelist:'gif|png|jpg|jpeg'
                                //blacklist:'exe|php'
                                //onchange:''
                                //
                            });
                            $("#divInputFile a").attr("href","javascript:void(0)").click(function () {
                                file_input.ace_file_input('reset_input');
                            });
                        })
                    </script>


                    <!--表单验证提交js-->
                    <script type="text/javascript">

                        function submitForm(obj) {
                            if (validate()) {
                                $(obj).attr("disabled","disabled");

                                var formData = new FormData($( "#form1" )[0]);
                                $.ajax({
                                    type: "POST",
                                    url: "{{url('BaseSet/add')}}",
                                    data: formData,
                                    //async:true,//异步
                                    //dataType:"json",
                                    async: false,
                                    cache: false,
                                    contentType: false,
                                    processData: false,
                                    success: function (data) {
                                        $(obj).removeAttr("disabled");
                                        var json=eval('('+data+')');

                                        var title="提示";
                                        var content="<p>"+json.message+"</p>";
                                        var callback=undefined;

                                        if(json.code==0)
                                        {
                                            //保存成功
                                            callback=function(){
                                                window.location.href="/basic/function/keywordmanager";
                                            };
                                        }
                                        AlterDialog(title,content,callback);
                                    }
                                });
                            }
                        }
                        function validate() {
                            $("#divErrorMsg").hide();

                            var errorMsg = [];
                            var txtkey = $("#txtkey").val();
                            var txtorder = $("#txtorder").val();
                            var ktype = $("input:checked[name=ktype]").val();

                            if (txtkey.length <= 0) errorMsg.push("关键词不能为空！");
                            if (txtorder.length <= 0 || !/^[0-9]*$/.test(txtorder)) errorMsg.push("排序必须为数字！");
                            if (ktype == "0") {
                                //文本回复
                                var txtcontent = $("#txtcontent").val();
                                if (txtcontent.length <= 0) errorMsg.push("回复文本内容不能为空！");
                            }
                            else if (ktype == "1") {
                                //图文回复
                                var hidValue = $("input:hidden[name=hidArticleList]").val();
                                if (hidValue.length <= 0) errorMsg.push("至少选择一篇文章！");
                            }
                            else if (ktype == "2") {
                                //图片回复
                                var fileImage = $("#fileImage").val();
                                if (fileImage.length <= 0) errorMsg.push("请选择图片！");
                            }
                            else {
                                errorMsg.push("请选择关键词类型！");
                            }


                            //输出错误消息
                            if (errorMsg.length > 0) {
                                var errorTag = '<i class="ace-icon fa fa-times"></i>';
                                var html = '';
                                for (var i = 0; i < errorMsg.length; i++) {
                                    html += errorTag + errorMsg[i];
                                    if (i < errorMsg.length - 1) html += '<br/>';
                                }

                                $("#errorMsg").html(html);
                                $("#divErrorMsg").show('fast');
                            }

                            return errorMsg.length <= 0;
                        }
                    </script>





                    <!--添加图文js-->

                    <script type="text/javascript">
                        var _ArticleList = undefined;
                        function changeType(type) {
                            $("#divImgText").hide();
                            $("#divImgTextArticle").hide();
                            $("#divText").hide();
                            $("#divImage").hide();
                            switch (type) {
                                case 0: //文本回复
                                    $("#divText").show();
                                    break;
                                case 1: //图文回复
                                    $("#divImgText").show();
                                    $("#divImgTextArticle").show();
                                    if (_ArticleList == undefined) loadArticles();
                                    break;
                                case 2://图片回复
                                    $("#divImage").show();
                                    break;
                            }
                        }

                        function loadArticles() {
                            $.post("/basic/function/getarticles",function (json) {
                                if(json!=undefined && json.length>0)
                                {
                                    _ArticleList=json;
                                    var html='';
                                    for(var i=0;i<json.length;i++)
                                    {
                                        html+='<tr>';
                                        html+='<td>'+getValue(json[i].Id)+'</td>';
                                        html+='<td>'+getValue(json[i].Title)+'</td>';
                                        html+='<td>'+getValue(json[i].Author)+'</td>';

                                        var name=getValue(json[i].Name);
                                        if(json[i].Newstype==1)
                                            name='<span class="label label-warning"><i class="ace-icon fa fa-refresh bigger-120"></i>微信素材</span>';

                                        html+='<td>'+name+'</td>';
                                        html+='<td><button class="btn btn-xs btn-info" onclick="chooseArticle('+i+')">选中</button></td>';
                                        html+='</tr>';
                                    }
                                    $("#AricleBody").html(html);
                                }
                            },"json");
                        }

                        function getValue(val)
                        {
                            if(val==null || val==undefined) val="";
                            return val;
                        }

                        function chooseArticle(index)
                        {
                            var html='<li class="text-primary">'+_ArticleList[index].Title+'</li>';

                            var hidValue= $("input:hidden[name=hidArticleList]").val();
                            if(hidValue.length>0)
                            {
                                hidValue+=',';
                            }
                            hidValue+=_ArticleList[index].Uid;
                            $("input:hidden[name=hidArticleList]").val(hidValue);

                            $("#ulArticleList").append(html);

                            _Dialog.dialog("close");
                        }
                        function clearArticle()
                        {
                            $("input:hidden[name=hidArticleList]").val("");
                            $("#ulArticleList").html("");
                        }

                        var _Dialog=undefined;
                        function showArticlesDialog() {
                            _Dialog = $("#ArticlesDialog").removeClass('hide').dialog({
                                modal: true,
                                dialogClass: "no-close",
                                title: "文章列表",
                                title_html: true,
                                width:"70%",
                                height:"400"
                            });
                        }


                    </script>


                </div>
                <!-- PAGE CONTENT ENDS -->
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.page-content-area -->
    </div>

@endsection
